import { PropType } from 'vue';

// 预设的抽屉宽度大小
export type DrawerSize = 'small' | 'default' | 'large' | 'auto';

// 预设的抽屉宽度大小map
export const drawerSizeMap: {
  [key in DrawerSize]: string;
} = {
  small: '320px',
  default: '400px',
  large: '600px',
  auto: 'calc(100vw - 100px)'
};

export interface DrawerProps {
  visible: boolean;
  /**
   * 标题
   */
  title: string;
  /**
   * 标题辅助文案
   */
  tips?: string;
  /**
   * 预设的抽屉宽度大小
   * small：320px
   * default： 400px
   * auto： 100vw - 100px
   */
  size?: DrawerSize;
  /**
   * 是否显示取消按钮
   * @default true
   * @type boolean
   */
  showCancelButton?: boolean;
  /**
   * 取消按钮文案
   * @default 取消
   * @type string
   */
  cancelText?: string;
  /**
   * 确定按钮文案
   * @default 确定
   * @type string
   */
  confirmText?: string;
  loading?: boolean;
  /**
   * 是否有操作按钮，默认没有
   * @default false
   */
  needOperationBtn?: boolean;
}

export const drawerProps = {
  visible: {
    type: Boolean as PropType<boolean>,
    default: false,
    require: true
  },
  title: {
    type: String,
    default: ''
  },
  tips: {
    type: String,
    default: ''
  },
  size: {
    type: String as PropType<DrawerSize>,
    default: 'default'
  },
  showCancelButton: {
    type: Boolean as PropType<boolean>,
    default: true
  },
  cancelText: {
    type: String as PropType<string>,
    default: '取消'
  },
  confirmText: {
    type: String as PropType<string>,
    default: '确定'
  },
  loading: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  needOperationBtn: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  showCloseBtn: {
    type: Boolean as PropType<boolean>,
    default: false
  }
};
